$hafl-float-size: (
    sm: $layout-gutter * 8,
    md: $layout-gutter * 10,
    lg: $layout-gutter * 12
);

.half-float {
    position: relative;
    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    .half-float-bottom {
        position: absolute;
        left: 50%;
        z-index: 2;
    }

    @each $grid, $value in $hafl-float-size {
        &.half-float-#{$grid} {
            margin-bottom: #{($value / 2) + 10};
            .half-float-bottom {
                bottom: -#{$value / 2};
                width: #{$value};
                height: #{$value};
                margin-left: -#{$value / 2};
            }
        }
    }
}
